<!--index.vue-->
<template>
  <div class="precipitate lt-container pd-15">
    <div class="d-flex bg-white">
      <!-- 左侧菜单 -->
      <menuList :createdSheetList="createdSheetList" ref="menuListRef" />
      <!-- 右侧内容 -->
      <div class="main flex-1 d-flex flex-column">
        <!-- 操作栏 -->
        <actionBar />
        <!-- 主体-动态组件 -->
        <div class="content flex-1" style="overflow-y: auto; overflow-x: hidden">
          <transition name="fade-transform" mode="out-in">
            <component
              :is="current.component"
              :key="current.key"
              :name="current.name"
              :id="current.key"
            />
          </transition>
        </div>
        <console />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import {
    ref,
    reactive,
    markRaw,
    onActivated,
    onDeactivated,
    onMounted,
    watch,
    provide
  } from 'vue'
  import bus from '@/utils/bus'
  import { useStore } from 'vuex'
  import { getUserSheet } from '@/api/sheet'
  import menuList from './menuList/index.vue'
  import actionBar from './actionBar/index.vue'
  import myLike from './content/myLike.vue'
  import recommend from './content/recommend.vue'
  import songSheet from './content/songSheet.vue'
  import console from './console/index.vue'
  import searchPage from './content/searchPage/index.vue'
  // eslint-disable-next-line no-undef
  defineOptions({
    name: 'Precipitate'
  })

  const store = useStore()
  interface Dynamic {
    key: string
    component: any
    name?: string
  }
  const defaultList: Dynamic[] = [
    { key: 'recommend', component: markRaw(recommend), name: '推荐' },
    { key: 'myLike', component: markRaw(myLike), name: '我喜欢' },
    { key: 'recentPlays', component: markRaw(myLike), name: '最近播放' }
  ]
  // 组件列表
  const componentList = ref<Dynamic[]>([])

  // 创建的歌单列表
  const createdSheetList = ref([])
  // 当前组件
  const current = reactive<Dynamic>({
    // key: 'searchPage',
    // component: markRaw(searchPage)
    key: '',
    component: ''
  })
  provide('current', current)

  onActivated(() => {
    // 获取歌单列表
    getUserSheet(store.state.userInfo.userId).then((res: any) => {
      componentList.value = defaultList
      res.forEach((item: any) => {
        componentList.value.push({
          key: item.id,
          component: markRaw(songSheet),
          name: item.sheetName
        })
      })

      // 下放到子组件菜单列表进行回显
      createdSheetList.value = res.map((item: any) => {
        return {
          title: item.sheetName,
          key: item.id
        }
      })
    })

    // 菜单变化后导致动态组件的变化
    bus.on('menuChange', val => {
      const obj: any = componentList.value.find((item: any) => item.key === val)
      current.key = obj?.key
      current.component = obj?.component
      current.name = obj?.name
    })
  })

  onDeactivated(() => bus.off('menuChange'))

  // 当前创建的歌单列表数据provide给子孙组件
  const menuListRef = ref<typeof menuList>()
  const sheetList = ref([])
  onMounted(() => {
    watch(
      () => menuListRef.value!.menuList.at(-1).children,
      val => {
        sheetList.value = val
      },
      {
        deep: true
      }
    )
  })
  provide('sheetList', sheetList)

  // 跳至搜索页
  const searchKey = ref<string>('')
  provide('searchKey', searchKey)
  provide('jumpSeachPage', (val: string) => {
    searchKey.value = val
    if (current.key !== 'searchPage') {
      current.key = 'searchPage'
      current.component = markRaw(searchPage)
    }
  })
</script>

<style lang="scss" scoped>
  .precipitate {
    & > div {
      height: 100%;
    }

    .main {
    }
  }
</style>
